<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>我们宅微信编辑器 - 公众微信图文样式排版编辑工具（在线版） - 我们宅终极版编辑器</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/iconfont.css" rel="stylesheet" type="text/css" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/colorpicker.css">
<link rel="stylesheet" type="text/css" href="css/editor-min.css">
<link rel="stylesheet" href="css/breakingnews.css">

<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="js/colorpicker-min.js" type="text/javascript"></script>
<script src="ueditor/third-party/zeroclipboard/ZeroClipboard.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.demo { width: 1000px; margin: 10px auto;}
.demo1 { margin-top: 10px;}
.demo2 { margin-top: 10px;}
a{color:#FFF}
</style>
<style type="text/css">
.the-icons td {border: #e2e2e2 dotted 1px;
padding: 5px 9px;
text-align: center;
cursor: pointer;
font-size: 16px;}

.tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
.tabs li i {
	display: inline-block;
	width: 20px;
	height: 20px;
	font-size: 10px;
	vertical-align: middle;
	margin-right: 6px;
	background-size: 20px;
	overflow: hidden;
}
.tabs li i.icon-stack-of-photos {
	background-image: url(../images/stack_of_photos.png);
}
.tabs li i.icon-template {
	background-image: url(../images/template.png);
}
.tabs li i.icon-picture {
	background-image: url(../images/picture.png);
}
.icon-qianjin{
    transform:rotate(-90deg);
    font-size:22px !important;
    padding-right: 4px;
}
.icon-qianjin.active{
    transform:rotate(-90deg);
}
.tabbox button{
    background-color:#333333;padding: 10px 4px;color: #fff;text-align: center;font-size: 15px;width:88%;border: none;outline:none;border-bottom: 1px solid #fff;cursor: pointer;
}
</style>

<script src="js/breakingnews.js"></script>
<script>
$(function(){
	$('#breakingnews1').BreakingNews({
		title: '公告'
	});

	$('#breakingnews2').BreakingNews({
		title: '我们宅公众号：indoorsteam',
		titlebgcolor: '#099',
		linkhovercolor: '#099',
		border: '1px solid #099',
		timer: 4000,
		effect: 'slide'
	});

});
</script>
</head>
<body>

<header class="header" id="top">
    <nav class="navbar" role="navigation">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <!-- Navbar-Header -->
                    <div class="navbar-header">
                        <!-- Text-Logo -->
                        <a href="" class="navbar-brand scrollto" title="">
                            <img style="height:62px;" alt="" src="images/logo.png">
                        </a>
                    </div><!-- /End Navbar-Header -->
                    <ul class="nav navbar-nav navbar-right">
                        <li><font color="#FF0000">您未授权？</font></li>
                        <li><a target="_blank" href="https://item.taobao.com/item.htm?&id=44008951845" >授权</a></li>
                        <li><a href="vip.html">进入</a></li>
                    </ul>
                            <!-- Navbar-Collapse -->
                    <ul class="nav navbar-nav navbar-right">
                        <li><a target="_blank"  href="/">首页</a></li>
                        <li class="dropdown active"><a target="_blank" href="meitu.html">美图编辑<span class="caret"></span></a></li>
                        <li class="dropdown"><a target="_blank" href="help.html">帮助中心<span class="caret"></span></a></li>
                        <li><a target="_blank" href="Ask-Me.html">吐槽中心</a></li>
                        <li class="dropdown"><a target="_blank" href="2wm.html">二维码生成<span class="caret"></span></a>
                            <!-- /End Navbar-Collapse -->
                        </div><!-- /End Col -->
                    </div><!-- /End Row -->
                </div><!-- /End Container -->
            </nav>
</header>

<div class="main" style="position:relative;">
<!-- 代码 开始 -->
<!-- 代码 结束 -->
<div class="wxeditor">
  <div class="clearfix">
    <!--L S-->
    <div class="left clearfix">
      <div class="tabbox clearfix">
        <button>切换</button>
        <ul class="tabs" >
            <li>
              <a href="javascript:init(49,1);" ><i class="icon-stack-of-photos"></i>版权素材
              <i class="iconfont icon-qianjin" style="float: right;"></i></a>
            </li>
            <li><a href="javascript:init(49,1);" >VIP素材</a></li>
            <li><a href="javascript:init(50,1);" >世界杯</a></li>
            <li><a href="javascript:init(48,1);" >热门</a></li>
            <li><a href="javascript:init(1,1);" >标题</a></li>
            <li><a href="javascript:init(2,1);" >正文</a></li>
            <li><a href="javascript:init(3,1);" >图文</a></li>
            <li><a href="javascript:init(4,1);" >关注</a></li>
            <li><a href="javascript:init(5,1);" >分隔符</a></li>
            <li><a href="javascript:init(6,1);" >二维码</a></li>
            <li><a href="javascript:init(46,1);" >交互</a></li>

            <li>
                <a href="jinitavascript:ini(1,1,1);">
                    <i class="icon-template"></i>模板
                    <i class="iconfont icon-qianjin active" style="float: right;"></i>
                </a>
            </li>
            <li><a  href="javascript:ini(1,1,1);">主题模板</a></li>
            <li><a href="javascript:ini(0,1);" >设计师模板</a></li>

            <li>
                <a href="javascript:init(48,1);" >
                    <i class="icon-picture"></i>图片
                    <i class="iconfont icon-qianjin active" style="float: right;"></i>
                </a>
            </li>
            <li><a href="javascript:init(4,1);" >版权图库</a></li>
            <li><a href="javascript:init(48,1);" >图片设计</a></li>
            <li><a href="javascript:init(48,1);" >gif动图</a></li>
        </ul>
        <ul class="tabs level-two" style="display:none;">
            <li><a href="javascript:in(48,1);" style="padding: 10px 4px;"> 样式<a></li>
            <li><a href="javascript:in(48,1);" style="padding: 10px 4px;">建党节<a></li>
            <li><a href="javascript:in(48,1);" style="padding: 10px 4px;">行业<a></li>
            <li><a href="javascript:in(48,1);" style="padding: 10px 4px;">世界杯<a></li>
        </ul>
        <em class="fr"></em>
    </div>
      <!--左侧菜单结束-->
      <div class="tplcontent">
          <!--左侧选择内容 S-->

               <!--tab1 S-->
            <div id="tab1" class="tab_con dn"  style="height:787px;overflow-y:scroll;display: block;" >

                <ul class="content clearfix">
                    <li v-for="(item,index) in datas">
                        <div class="itembox" v-if="item.is_temp == 1" style="color:#000;" :data-id="index"><img :src="img_url(item.Cover)" alt="" style="width:100%" /></div>
                        <div class="itembox" v-else  :data-id="index" v-html="replace_url(item.Content)" ></div>
                    </li>
                </ul>
            </div>


        </div>


      <!--左侧选择内容 E-->
      <!--<div class="goto">→</div>-->
     </div>
     <!--L E-->
     <!--R S-->
     <div class="right">
        <div id="bdeditor" style="margin-left:-57px;">
          <script charset="utf-8" src="ueditor/ueditor.config.js" type="text/javascript"></script>
          <script charset="utf-8" src="ueditor/ueditor.all.min.js" type="text/javascript"> </script>
          <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
          <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
          <script charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js" type="text/javascript"></script>
          <script id="editor" style="width: 108.7%; height: 796px;" type="text/plain"></script>
        </div>
      </div>
     <!--R E-->
    </div>

	 <!--手机预览 S-->
     <div id="previewbox">
        <div style="height: 100%; padding-right: 0px; -ms-overflow-y: scroll;">
          <div style="line-height: 12px; font-size: 15px; font-weight: 700;">我们宅，我们专注于微信公众号</div>
          <div><em style="color: rgb(140, 140, 140); font-size: 12px; font-style: normal;">2020-02-02</em> <a id="post-user" style="color: rgb(96, 127, 166); font-size: 12px;" href="http://mp.weixin.qq.com/s?__biz=MzA5MTgxMDM4OA==&mid=204802280&idx=1&sn=c6aa2449f88df88fd3da8400d352183b&scene=1&srcid=0729ESbazG9MDiofBPHW0Lzi#rd" target="_blank">我们宅</a> </div>
          <div id="preview" style="height:370px; overflow-y:scroll;"></div>
        </div>
        <div id="phoneclose" style="top: 30px; width: 50px; height: 50px; right: 0px; font-size: 30px; font-weight: 700; position: absolute; cursor: pointer;">X</div>
    </div>
     <!--手机预览 E-->

     <div class="btn_container">
	   <a id="meitu" href="meitu.html" target="_blank" title="微信编辑器在线美图">美图编辑</a>
       <button class="btn btn-small copywx breath" id="copy-botton">一键复制</button>
       <a href="javascript:;" id="clear-editor" class="btn btn-small qingkong breath" data-toggle="tooltip" data-placement="right" title="" data-original-title="清空内容">清空内容</a>
       <div id="phone">手机预览</div>
       <a id="help" href="help.html" target="_blank" title="微信编辑器使用帮助">在线帮助</a>
    </div>

      <!--便捷 S-->
      <!--<div class="fullshowbox">全屏</div>
      <div class="fullhidebox">退出</div>
      <div id="phone">手机预览</div>-->
      <!--便捷 E-->
</div>
<script src="js/uniedit.js" type="text/javascript"></script>
<script>

//$(function(){
//	$('#clear-editor').click(function(){
//		if(confirm('是否确认清空内容，清空后内容将无法恢复')){
//			setEditorHtml("");
//		}
//	});
//});

$(function(){
	$('#clear-editor').click(function(){
		if(confirm('友情提醒：是否确认清空内容，清空后内容将无法恢复！')){
                                baidu.editor.getEditor('editor').setContent('');
		}
	});

	window.onbeforeunload = function(event) {
(event || window.event).returnValue = "我们宅温馨提示：您即将关闭页面，是否确认编辑内容已经复制到微信公众平台后台？";
}




});


</script>
</div>

<!-- 我们宅评论框 start -->
    <div style="position:absolute; top:1000px; width:100%;">

<!-- 我们宅评论框 end -->

<!--foot S-->
<div style=" margin:auto; width:1100; background:rgba(234,233,231,0.9); color:#999;">
<br />
  <p align="center">我们宅微信图文编辑器，为微信运营者提供在线编辑排版免费的微信编辑工具！</p>
 <p align="center">Copyright © 2015-2018 我们宅团队 - 嗨皮网 www.unihi.cn All Rights Reserved.</p>
<br />
</div>
</div>

<script>
/*小图标选择器*/
function shifuMouseDownMark(id) {

	var con   = $('#'+id).find("span").html();
	var range = UE.getEditor('editor').selection.getRange();

	range.select();

	UE.getEditor('editor').selection.getText();

	// UE.getEditor('editor').execCommand('insertHtml',con);
}
</script>
<script>
$.browser = {};
$.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase());
$.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase());
$.browser.opera = /opera/.test(navigator.userAgent.toLowerCase());
$.browser.msie = /msie/.test(navigator.userAgent.toLowerCase()) || /trident/.test(navigator.userAgent.toLowerCase()) ;

if( $.browser.msie ) {
	alert("我们宅强烈建议下载360极速浏览器进行操作！");
}
</script>
<!--foot E-->
<!--底部浮动隐藏 <div id="bottomToolbar">热门推荐：我们宅</div>-->
<script>
    function name(params) {

    }
    var page = 2;
    var cid = 2;
    var host="http://"+window.location.host;
    init(1,1);
    var d = UE.getEditor("editor", {
        topOffset: 0,
        autoFloatEnabled: !1,
        autoHeightEnabled: !1,
        autotypeset: {
            removeEmptyline: !0
        },
        toolbars: [["source", "undo", "redo", "bold", "italic", "underline", "forecolor", "backcolor", "link", "unlink", "paragraph", "fontfamily", "fontsize", ], ["indent", "justifyleft", "justifyright", "justifycenter", "justifyjustify", "rowspacingtop", "rowspacingbottom", "lineheight", "edittip ", "inserttable", "template", 'drafts', "emotion", "map", "insertvideo", "spechars", "searchreplace", "removeformat", "autotypeset", ]],
        autoHeightEnabled: false,
        allowDivTransToP: false,
        autoFloatEnabled: false,
        enableAutoSave: true
    });
		// setTimeout(ueget,1000);
		function ueget(){
			UE.getEditor('editor').ready(function() {
					var html =  UE.getEditor('editor').execCommand( "getlocaldata" );
					/* console.log(html); */
					// UE.getEditor('editor').setContent(html);
			});
		}

    var app = new Vue({
        el: '#tab1',
        data: {
            datas:[]
        },
        updated: function () {
            $(".itembox").unbind();
            $(".itembox").on("click", function() {
                // console.log(app.datas);
                console.log(app.replace_url(app.datas[$(this).data('id')].Content));
                d.execCommand("insertHtml", '<section class="unieditor">' + app.replace_url(app.datas[$(this).data('id')].Content) + "</section><br />");
            });
        },
        methods:{
            replace_url:function(data){
					var sHttp = '';
					//判断图片地址是否自带协议
					// if (data.search(/[src=|url]['|"|\(]http:\/\//) < 0) {
					// 	 sHttp = "http:";
					// }
					//图片路径
	                var re1 = /src=(['|"])/g;

	                	var re2 = 'src=$1'+host+'/img.php?r='+sHttp;

	                data = data.replace(re1,re2);
									//背景图片路径
	                re1 = /url\((['|"]){0,1}/g;
	                re2 = "url($1"+host+"/img.php?r="+sHttp;

                return data.replace(re1,re2);
            },
            img_url:function(data){
                return host+"/img.php?r="+data;
            }
        }
    });
        $(".tabs li").on("click", function() {
            $(this).addClass("active").siblings().removeClass("active");
        });
        var is_ajax = 0;

        function init(cid,page){
            $.cookie('cid', cid, { expires: 1, path:'/'});
            is_ajax = 1;
                $.ajax({
                url:'/c.php',
                type:'POST',
                data:'cid='+cid+'&page='+page,
                dataType:'json',
                success:function(e){
                        if (page<=1) {
                        app.datas = e.data;
                    }else{
                        app.datas=app.datas.concat(e.data) ;
                    }

                    is_ajax = 0;
                }
            });
        }

        function ini(ifsystem,cid,page){
            $.cookie('ifsystem', ifsystem, { expires: 1, path:'/'});
            $.cookie('cid', cid, { expires: 1, path:'/'});
            $.cookie('is_tem', 1, { expires: 1, path:'/'});


            is_ajax = 1;
                $.ajax({
                url:'/d.php',
                type:'POST',
                data:'ifsystem='+ifsystem+'&cid='+cid+'&page='+page,
                dataType:'json',
                success:function(e){
                    if (page<=1) {
                        app.datas = e.data;
                    }else{
                        app.datas=app.datas.concat(e.data) ;
                    }

                    is_ajax = 0;
                }
            });
        }
        $('#tab1').on('scroll',function(params) {
            var height = $(this).find('.content').height() - 797;
            var sHeight = $(this).scrollTop();
            if (sHeight >= height  && is_ajax == 0) {
                if($.cookie('is_tem') != 1){
                    init($.cookie('cid'),page);
                }else{
                    ini($.cookie('ifsystem'),$.cookie('cid'),page);
                }
                page++;
            }
        });

        $('.tabbox button').click(function(){
            $('.tabs.level-two').css('display','block').siblings().css('display','none');
            function init(cid,page){
                $.cookie('cid', cid, { expires: 1, path:'/'});
                is_ajax = 1;
                    $.ajax({
                    url:'/a.php',
                    type:'POST',
                    data:'cid='+cid+'&page='+page,
                    dataType:'json',
                    success:function(e){
                            if (page<=1) {
                            app.datas = e.data;
                        }else{
                            app.datas=app.datas.concat(e.data) ;
                        }

                        is_ajax = 0;
                    }
                });
            }
        })


</script>
</body>
</html>
